<template>
  <div class="searchProd">
    <div class="container">
      <h1>"<span>{{name}}</span>"的搜索结果</h1>
      <div class="searchNone" v-if="searchProducts.length===0">
        <span>没有找到相关商品信息</span>
      </div>
      <div class="products" v-if="searchProducts.length>0">
        <div class="product" @click="gotoProduct(item.id)" v-for="item in searchProducts" :key="item.id">
          <a>
            <div class="img">
              <img :src="item.s_goods_photos[0].path" alt="" />
            </div>
            <span class="productName">{{item.name}}</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {searchGood} from '../assets/js/request.js'
export default {
  data() {
    return {
      // list: [1, 2, 3, 4,5,6],
      searchProducts:[],
      name:''
    };
  },
  async created() {
    this.searchProducts = [];
    let res = await searchGood(this.$route.params.name);
    console.log(res);
    this.searchProducts = res.rows;
    this.name = this.$route.params.name;
  },
  methods:{
    gotoProduct(id) {
      this.$router.push(`/products/${id}`)
    }
  }
};
</script>

<style lang="scss" scoped>
.searchProd {
  padding: 27px 0 72px;
  .container {
      h1 {
          text-align: left;
          margin-bottom: 16px;
          span {
              color: #44b8f2;
          }
        //   margin: ;
      }
      .searchNone {
         padding: 108px 0;
         background-color: white;
        span {
          font-size: 24px;
        }
      }
      .products {
          display: flex;
          margin-left: auto;
          margin-right: auto;
          flex-wrap: wrap;
          .product {
              width: 295px;
              margin: 0 15.2px 15.2px 0;
              a {
                  .img {
                      width: 100%;
                      padding: 72px 0 64px;
                      img {
                          width: 72%;
                      }
                  }
                  .productName {
                      display: block;
                      padding: 32px 0;
                  }
              }
          }
          .product:nth-child(4n) {
                margin: 0 0 20px 0;
              }
      }
  }
}
</style>